<template>
    <header class="header">
        <div class="logo">
            <img src="/logo.png" alt="Logo" />
        </div>
        <nav class="nav">
            <ul>
                <li>
                    <RouterLink to="/">首页</RouterLink>
                </li>
                <li>
                    <RouterLink to="/select">国际</RouterLink>
                </li>
                <li>
                    <RouterLink to="/add">国内</RouterLink>
                </li>
                <li>
                    <RouterLink to="/delect">财经</RouterLink>
                </li>
                <li>
                    <RouterLink to="/update">科技</RouterLink>
                </li>
                <li>
                    <RouterLink to="/update">更多</RouterLink>
                </li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索" />
        </div>
    </header>
    <RouterView></RouterView>
</template>

<script setup>

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
}

.logo img {
    height: 40px;
}

.nav ul {
    display: flex;
    list-style: none;
}

.nav li {
    margin-right: 20px;
}

.nav a {
    color: #fff;
    text-decoration: none;
}

.search input {
    padding: 5px;
    border: none;
    border-radius: 4px;
}

RouterLink:hover {
    color: red;
}
</style>